import { Component, Input, Output, EventEmitter, ViewChild } from "@angular/core";
import { NouiFormatter, NouisliderComponent } from "ng2-nouislider";
import { SliderLevelModel } from "./sliderLevel.model";

/**
 * TODO: move category images to 
 */
@Component({
    selector: 'slider',
    templateUrl: 'slider.component.html',
    styleUrls: ['slider.component.scss']
})
export class SliderComponent {
    private _selected: number = 0;
    private _levels: SliderLevelModel[];
    private _answerCategories: boolean;
    
    @Output() changed: EventEmitter<SliderLevelModel> = new EventEmitter();

    @ViewChild('slider') noUiSlider: NouisliderComponent;

    private to = value => {
        if (this._answerCategories)
            return '';
        else {
            value = Math.round(value);
            if (value < 0) {
                value = 0;
            }
            if (value >= this._levels.length) {
                value = this._levels.length - 1;
            }
            return this._levels.find(x => x.id == value).name;
        }
    }
    private from = value => {
        let result = this._levels.findIndex(x => x.name == value);
        return result == -1 ? 0 : result;
    }

    public config: any = {
        behaviour: 'tap-drag',
        connect: [true, false],
        start: -1,
        keyboard: true,
        step: 10,
        pageSteps: 1,
        range: {
            min: 0,
            max: 100
        },
        pips: {
            mode: 'steps',
            density: 10,
            filter: function (value) { return value % 10 ? 0 : 1 },
            format:{
                to: this.to,
                from: this.from
            }
        }
    };

    @Input() set levels(value: SliderLevelModel[]) {
        if (value) {
            this._levels = value;
            setTimeout(() => {
                if (this.noUiSlider.slider) {
                    this.noUiSlider.slider.updateOptions({
                        range: {
                            min: 0,
                            max: (this._levels.length - 1) * 10
                        }
                    });
                }
            });
        }
    }

    get levels(): SliderLevelModel[] {        
        return this._levels;
    }

    @Input() set selected(value: number) {
        if (value !== undefined) {            
            this._selected = this._levels.findIndex(x => x.id == value);
            setTimeout(() => {
                //first element has index -1            
                if (this.noUiSlider.slider) {
                    this.noUiSlider.slider.updateOptions({ start: this._selected == 0 ? -1 : this._selected * 10 });
                    this.onChange(this._selected);
                }    
            });            
        }
    }

    get selected(): number {
        return this._selected;
    }  

    @Input() set answerCategories(value: boolean){
        if(value)
            this._answerCategories = value;
    }

    get answerCategories(): boolean{
        return this._answerCategories;
    }

    public onChange(event: number) {
        this.changed.emit(this._levels[event]);
    }   
}